<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      @gobackTriser="goBack"
      :back="back"
    ></topTitle>
    <div class="mainCon mainBox" id="mainBox">
      <el-row class="title_css">{{ inforDetails.title || '--' }}</el-row>
      <el-row class="tips">
        <span>发布时间：{{ inforDetails.createTime || '--' }}</span>
        <span>来源：{{ inforDetails.remark || '--' }}</span>
        <span>发布人：{{ inforDetails.publisherId || '--' }}</span>
      </el-row>
      <el-row
        style="padding: 15px 0"
        v-html="inforDetails.content"
        class="policyContent"
        id="infoContent"
      ></el-row>
      <!-- <template v-if="inforDetails.fileExpandVOs.length>0"> -->
      <template v-if="fileLen">
        <el-row class="interval" style="margin-top: 25px">附件：</el-row>
        <template v-for="(item, index) in inforDetails.fileExpandVOs">
          <el-row class="interval" :key="index">
            <a
              v-show="!isIe"
              class="a_link mouseOn"
              :href="item.absolutePath"
              :download="item.originalName"
              target="_blank"
              >{{ item.originalName || '--' }}</a
            >
          </el-row>
          <el-row class="interval" :key="index">
            <a
              v-show="isIe"
              class="a_link mouseOn"
              href="#"
              @click="downLoad(item.absolutePath)"
              >{{ item.originalName || '--' }}</a
            >
          </el-row>
        </template>
      </template>
      <el-row class="nextRow">
        <el-col
          :span="11"
          class="nextCol"
          v-if="inforDetails.previousInfoExpandVO"
        >
          <el-button
            type="primary"
            class="saveBtn"
            @click="
              showInfor(
                inforDetails.previousInfoExpandVO.id,
                inforDetails.previousInfoExpandVO.range
              )
            "
            >上一篇</el-button
          >
          <a
            class="nextTitle mouseOn"
            @click="
              showInfor(
                inforDetails.previousInfoExpandVO.id,
                inforDetails.previousInfoExpandVO.range
              )
            "
            :title="inforDetails.previousInfoExpandVO.title"
            >{{
              inforDetails.previousInfoExpandVO.title.length >= 20
                ? inforDetails.previousInfoExpandVO.title.substr(0, 15) + '···'
                : inforDetails.previousInfoExpandVO.title
            }}</a
          >
        </el-col>
        <el-col
          :span="11"
          class="nextCol nextTitle"
          v-if="!inforDetails.previousInfoExpandVO"
          >没有上一篇了</el-col
        >
        <el-col
          :span="11"
          :offset="2"
          class="nextCol"
          style="text-align: right"
          v-if="inforDetails.nextInfoExpandVO"
        >
          <a
            class="nextTitle mouseOn"
            @click="showInfor(inforDetails.nextInfoExpandVO.id)"
            :title="inforDetails.nextInfoExpandVO.title"
            >{{
              inforDetails.nextInfoExpandVO.title.length >= 20
                ? inforDetails.nextInfoExpandVO.title.substr(0, 15) + '···'
                : inforDetails.nextInfoExpandVO.title
            }}</a
          >
          <el-button
            type="primary"
            class="saveBtn"
            @click="showInfor(inforDetails.nextInfoExpandVO.id)"
            >下一篇</el-button
          >
        </el-col>
        <el-col
          :span="11"
          :offset="2"
          class="nextCol nextTitle"
          style="text-align: right"
          v-if="!inforDetails.nextInfoExpandVO"
          >没有下一篇了</el-col
        >
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'inforDetail',
  inject: ['reload'],
  data() {
    return {
      fileLen: false, //附件显示
      inforDetails: [],
      previousFlag: false,
      nextFlag: false,
      datas: {
        id: '',
      },
      titleText: '信息详情',
      back: true,
      pathUrl: '',
      queryId: '',
      isIe: false,
    }
  },
  created() {
    this.datas.id = this.$route.query.id
    this.queryId = this.$route.query.id
    if (this.$route.query.pathUrl == '/home') {
      this.$store.commit('set_active_index', '/home/notice/inforList')
      this.$store.state.activeMenu = '/home/notice/inforList'
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/notice/inforList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    //初始化选择列表
    this.getIsIe()
    this.getInforDetail('api-i/info/expand/noreaddetail', this.datas)
  },
  watch: {
    $route: {
      handler(route) {
        const vm = this
        vm.datas.id = vm.$route.query.id
        vm.getInforDetail('api-i/info/expand/noreaddetail', vm.datas)
      },
      deep: true,
    },
  },
  methods: {
    /**
     * @description:获取重要通知列表
     */
    getImportantNotice() {
      const vm = this
      vm.axios({
        method: 'get',
        url: 'api-i/info/expand/listnoread',
      })
        .then((response) => {
          vm.$store.commit('setNoticeDate', response.data.result)
        })
        .catch((error) => {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '获取重要通知列表失败',
            type: 'error',
          })
        })
    },
    getInforDetail(urls, datas) {
      const vm = this
      vm.axios({
        method: 'get',
        url: urls,
        params: datas,
      })
        .then((resp) => {
          vm.inforDetails = resp.data.result
          vm.getImportantNotice()
          var fileLen = vm.inforDetails.fileExpandVOs.length
          if (fileLen > 0) {
            vm.fileLen = true
          }
          if (!vm.inforDetails.previousInfoExpandVO) {
            vm.previousFlag = true
          }
          if (!vm.inforDetails.nextInfoExpandVO) {
            vm.nextFlag = true
          }
        })
        .catch((resp) => {})
    },
    showInfor(id) {
      this.datas.id = id
      this.getInforDetail('api-i/info/expand/noreaddetail', this.datas)
      $('#mainBox').animate({ scrollTop: 0 }, 300)
    },
    goBack() {
      this.$router.push('/home/notice/inforList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/notice/inforList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    downLoad(url) {
      window.open(url)
    },
    getIsIe() {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        this.isIe = true
      } else {
        this.isIe = false
      }
    },
  },
}
</script>
<style scoped lang="less">
.mainCon {
  overflow-y: auto;
  background: #fff;
  padding: 24px;
  height: calc(100% -67px);
}

.mainBox {
  top: 198px !important;
}

.mouseOn {
  cursor: pointer;
}
.title_css {
  color: #333;
  font-size: 22px;
  margin: 50px auto 10px;
  text-align: center;
}
.tips {
  height: 50px;
  margin: 40px 0 15px 0;
  background-color: #f5f7fb;
  font: bold 18px/50px Microsoft YaHei;
  text-align: center;
}
.tips span {
  margin: auto 15px;
  color: #666;
  font-size: 14px;
  font-weight: normal;
}
.a_link {
  color: #409eff;
}
.interval {
  padding: 5px 0;
}
.nextCol {
  background-color: #f5f7fb;
  height: 40px;
}
.nextRow {
  padding-top: 70px;
}
.nextTitle {
  padding: 0 10px;
  line-height: 40px;
}

/deep/.policyContent p span {
  font-size: 14px !important;
  color: #222 !important;
  line-height: 30px;
}
/deep/.policyContent p {
  font-size: 14px !important;
  color: #222 !important;
  line-height: 30px;
}
/deep/.policyContent img {
  // width: 100%!important;
  max-width: 1577px;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}
</style>
